<template>
	<view>
		<view class="date-picker-cta">
			<view class="date-picker-cta">
				<date-range @onChange="changeDate"></date-range>
			</view>
		</view>
		<view class="stats flex-between">
			<view class="flex-center stats-title">共收款<view class="stats-val">{{total_count}}</view>笔</view>
			<view class="flex-center stats-title">合计：<view class="stats-val">¥{{total_money}}</view></view>
		</view>
		<view class="records">
			<mescroll-uni class="list-wrap" @getData="getListData" top="300" refs="mescroll" :size="10">
				<block slot="list">
					<view class="list-box" v-if="collect_list.length > 0">
						<view class="record" v-for="(itmes,index) in collect_list" :index="index">
							<view class="record-main flex-between">
								<view class="record-title">订单号</view>
								<view class="record-value">{{itmes.collection_no}}</view>
							</view>
							<view class="record-main flex-between">
								<view class="record-title">用户昵称</view>
								<view class="record-value">{{itmes.nickname}}</view>
							</view>
							<view class="record-main flex-between">
								<view class="record-title">订单金额</view>
								<view class="record-value record-money">¥{{itmes.money}}</view>
							</view>
							<view class="record-main flex-between" v-if="itmes.balance_money > 0">
								<view class="record-name">消费券抵扣</view>
								<view class="record-value record-money">¥{{itmes.balance_money}}</view>
							</view>
							<view class="record-main flex-between" v-if="itmes.point_money > 0">
								<view class="record-name">数字资产抵扣</view>
								<view class="record-value record-money">¥{{itmes.point_money}}</view>
							</view>
							<view class="record-main flex-between" v-if="itmes.account5 > 0">
								<view class="record-name">数字资产抵扣</view>
								<view class="record-value record-money">¥{{itmes.account5}}</view>
							</view>
							<view class="record-main flex-between">
								<view class="record-name">入账金额</view>
								<view class="record-value record-money">¥{{itmes.real_money}}</view>
							</view>
							
							<view class="record-addon">
								<view class="record-wx" v-if="itmes.type == 1">{{itmes.pay_type}}</view>
								<view class="record-zfb" v-else>{{itmes.pay_type}}</view>
								<view class="record-time">{{itmes.pay_time}}</view>
							</view>
						</view>
					</view>
					<ns-empty v-else text="暂无收款记录"></ns-empty>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import dateRange from '@/components/date-range/date-range.vue';
	export default {
		components: {
			dateRange
		},
		data() {
			return {
				total_count: 0,
				total_money: 0.00,
				dateObj:{
					startDate:'',
					endDate:'',
				},
				collect_list: []
			}
		},
		onShow() {
			if (!this.$util.checkToken('/pages/property/collection/collection-record')) return;
		},
		methods: {
			changeDate(date){
				this.dateObj = {...date};
				if (this.dateObj.startDate && this.dateObj.endDate) {
					this.mescroll.resetUpScroll();
				}
			},
			getListData(mescroll) {
				let data = {
					type: 2,
					page_size: mescroll.size,
					page: mescroll.num,
					start: this.dateObj.startDate,
					end: this.dateObj.endDate
				};
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/collection/api/shop/record',
					data: data,
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
							this.total_money = res.data.money;
							this.total_count = res.data.count;
						} else {
							this.$util.showToast({ title: msg });
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.collect_list = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							v.is_off = 0;
						});					
						
						this.collect_list = this.collect_list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date-picker-cta {
		background-color: #fff;
		padding: 30rpx;
	}

	.date-picker {
		width: 690rpx;
		height: 72rpx;
		background: #F8F8F8;
		border-radius: 36rpx;

		.date-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.date-value {}
	}

	.stats {
		padding: 30rpx;

		.stats-title,
		.stats-val {
			font-size: 28rpx;
			color: #909399;
			line-height: 40rpx;
		}

		.stats-val {
			color: #FF6A00;
		}
	}

	
	.records {
		padding: 0 30rpx;
		
		.list-box {

		}
		.record {
			padding: 30rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.record-main {
				margin-bottom: 15rpx;
				
				.record-money {
					color: #FF6A00;
				}
			}

			.record-title,
			.record-value {
				font-size: 28rpx;
				color: #303133;
				line-height: 40rpx;
			}

			.record-value {}

			.record-addon {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 12rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				
				.record-time {
					color: #909399;
					
				}
				.record-wx {
					color: #31bb6d;
				}
				.record-zfb {
					color: #FF6A00;
				}
			}
		}
	}
	.recors-nodata {
		padding: 48rpx;
		text-align: center;
		font-size: 30rpx;
		color: #909399;
		line-height: 42rpx;
	}
</style>
